<template>
  <div class="app-container">
    <el-row class="mb-15px">
      <el-select
        v-model="searchWord.deptId"
        placeholder="请选择申请单位"
        clearable
        :disabled="disabledDept"
        @change="getList"
      >
        <el-option
          v-for="item in deptList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>

      <div class="w-300px mx-15px">
        <el-date-picker
          v-model="timeArray"
          type="daterange"
          range-separator="至"
          start-placeholder="申请日期起"
          end-placeholder="申请日期止"
          style="width: 100%"
          value-format="YYYY-MM-DD"
          :clearable="false"
          @change="changTime"
        />
      </div>
      <el-button type="primary" @click="getList" icon="Search">查询</el-button>
      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
      <el-button type="primary" @click="exportExcel" plain icon="Download"
        >导出</el-button
      >
    </el-row>
    <div v-loading="loading">
      <el-table
        :data="tableData"
        ref="tableRef"
        stripe
        style="width: 100%; height: calc(100vh - 200px)"
        border
        scrollbar-always-on
      >
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column label="单位" prop="createByOrgName" align="center" />
        <el-table-column label="月份" prop="visitTime" align="center" />
        <el-table-column label="部门" prop="deptName" align="center" />
        <el-table-column label="到访网点" prop="outlet" align="center" />
        <el-table-column label="到访人员" prop="nickName" align="center" />
        <el-table-column label="次数" prop="num" width="100" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup name="GrassrootsStatistical">
import useCommonStore from '@/store/modules/common'
import useUserStore from '@/store/modules/user'
import { startOfYear, format } from 'date-fns'
import {
  getUnitListStatistics,
  exportUnitListStatistics
} from '@/api/toGrassrootsUnit'

const userStore = useUserStore()
const commonStore = useCommonStore()
const { proxy } = getCurrentInstance()
const router = useRouter()

const deptList = ref([])
const disabledDept = ref(false)
async function init() {
  // 获取申请公司列表
  const list = await commonStore.getCompanyData()
  deptList.value = list[0].children
  if (userStore.userInfo.orgId != 484) {
    deptList.value = list
    searchWord.value.deptId = userStore.userInfo.orgId
    disabledDept.value = true
  }
  //   设置初始日期范围
  timeArray.value = [
    format(startOfYear(new Date()), 'yyyy-MM-dd'),
    format(new Date(), 'yyyy-MM-dd')
  ]
  searchWord.value.statisticTimeBegin = format(
    startOfYear(new Date()),
    'yyyy-MM-dd'
  )
  searchWord.value.statisticTimeEnd = format(new Date(), 'yyyy-MM-dd')
  getList()
}
const loading = ref()
const tableData = ref([])
const searchWord = ref({})
function getList() {
  loading.value = true
  Object.keys(searchWord.value).forEach(key => {
    if (!searchWord.value[key]) {
      delete searchWord.value[key]
    }
  })
  getUnitListStatistics(searchWord.value)
    .then(res => {
      if (res.code == 200) {
        tableData.value = res.data
      }
    })
    .finally(() => {
      loading.value = false
    })
}

function reset() {
  init()
}

function exportExcel() {
  exportUnitListStatistics(searchWord.value).then(res => {
    // 生成a标签，下载bolb文件
    const a = document.createElement('a')
    const data = new Blob([res])
    a.href = URL.createObjectURL(data)
    a.download = '统计数据.xlsx'
    a.click()
    URL.revokeObjectURL(data)
    proxy.$message.success('导出成功')
  })
}

const timeArray = ref()
function changTime(val) {
  if (val) {
    searchWord.value.statisticTimeBegin = val[0]
    searchWord.value.searchTimeEnd = val[1]
  } else {
    searchWord.value.statisticTimeBegin = ''
    searchWord.value.searchTimeEnd = ''
  }

  getList()
}

init()
</script>

<style scoped lang="scss"></style>
